<template>
  <Transition name="right">
    <div class="before-after-camera" :style="{ width: roadType === 1 ? '2.2rem' : '2.8rem' }">
      <BouncedPanel
        @close="close(index)"
        class="camera-item"
        :key="index"
        v-for="(item, index) in videoUrl"
        v-show="item.url"
      >
        <div class="video-box" :title="item.name">
          <!-- <a-icon type="close" class="video-close" @click="videoDialogClose(index)" /> -->
          <VideoPlayer :url="item.url" />
        </div>
      </BouncedPanel>
    </div>
  </Transition>
</template>

<script>
/**
 * 前后两路摄像头
 * @author 阳坤
 * @date  2022/11/15
 * */
export default {
  name: 'BeforeAfterCamera'
}
</script>
<script setup>
import VideoPlayer from '@/components/video-player/VideoPlayer'
import BouncedPanel from '../../../components/detail-panel'
import { defineProps, defineEmits, computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

const roadType = computed(() => store.state.config.roadType)

const props = defineProps({
  // 前后两路摄像头url集合
  videoUrl: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['cameraClose'])

/**
 * 关闭视频弹框
 */
const close = index => {
  emit('cameraClose', index)
}
</script>

<style scoped lang="less">
@import url(~@/assets/styles/transition.less);
.before-after-camera {
  // position: absolute;
  // top: 6%;
  // right: 24.5%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
  /deep/ .camera-item {
    position: relative;
    .mz-panel-content {
      padding: 10px 10px;
      // .title {
      //   position: absolute;
      //   top: 0;
      //   right: 0;
      // }
    }
  }

  /deep/.title {
    height: 7px;
  }
  /deep/.mz-panel-content-main {
    justify-content: space-between;
  }
  .video-box {
    width: 100%;
    // height: 49%;
    min-height: 116px;
    // background: #000;
    border-image: linear-gradient(0deg, #1d82ff 0%, #22c8ff 100%) 1 1;
    border-radius: 3px;
    position: relative;
    overflow: hidden;

    .video-close {
      color: #008bfe;
      position: absolute;
      right: 8px;
      top: 8px;
      z-index: 100;
    }
  }
  /deep/.mz-panel-content {
    flex: none;
    video {
      max-height: 136px;
    }
  }
}
</style>
